
import React, { Component ,useEffect,useState} from 'react'

export default class App extends Component {
    state = {
        isCreated:true
    }
    render() {
        return (
            <div>
                <button onClick={()=>{
                    this.setState({
                        isCreated:!this.state.isCreated
                    })
                }}>click</button>
                {/* {this.state.isCreated?<Child/>:""} */}
                {this.state.isCreated && <Child/>}
            </div>
        )
    }
}

function Child (){
    useEffect(()=>{
        window.onresize=()=>{
            console.log("resizeresizeresizeresize");
        }
 var tiemer= setInterval(()=>{
                console.log("定时器触发看看")
            },500)
            return ()=>{
                console.log('组件销毁');
                window.onresize=null
                clearInterval(tiemer)
                //可以解决闭包问题 useEffect是回调可以写多个

            }
    },[])
    return <div>
        child
    </div>
}
// useEffect与useLayoutEffect区别
// 调用时机不同 useLayoutEffect和原来 componentDidMount& componentDidupdate一致 
// 在react完成dom更新后马上同步调用的代码 会阻塞页面渲染。  而useEffect是会在整个页面渲染完成后才会调用 
// 避免页面抖动 可以把操作dom的放到useLayoutEffect里去   防抖函数
// 